{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>天算星座-卫星大数据平台</title>
    <style type="text/css">
		html{height:100%}
		body{height:100%;margin:0;padding:0}
		#map{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        .clickable {
            cursor: pointer; /* 当鼠标悬浮时，光标变成手指形状 */
        }
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=b07Txardz712vRTFjDaBbPEmzOynEzOR"></script>
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" />
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static 'css/app.css' %}"/>

	<script type="text/javascript" src="{% static 'js/app.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'js/index.js' %}"></script>
	<script src="{% static 'sdk/sdk.js' %}"></script>
    <script type="text/javascript" src="{% static 'openseadragon/openseadragon.js' %}"></script>

	<link rel="stylesheet" href="{% static 'sdk/sdk.css' %}" />
    <link rel="stylesheet" href="{% static 'sdk/helper.css' %}" />
    <link rel="stylesheet" href="{% static 'css/time.css' %}" />

</head>
<body>
	<div id="map"></div>
	<!--header-->
    <section class="time-warp" id="time-warp">
	   <div id="timeline"></div>
	 </section>

	<div data-v-d1db20f6="" data-v-258a4cb6="" class="logo-menu">
		<div data-v-d1db20f6="" class="logo-wrap clearfix">
			<div data-v-d1db20f6="" class="logo-img fl">
				<img data-v-d1db20f6="" src="" alt="">
			</div>
			<div data-v-d1db20f6="" class="logo-title fl">
				<span data-v-d1db20f6="">
						天算星座-卫星大数据平台
				</span>
			</div>
		</div>
		<div data-v-d1db20f6="" class="menu-dialog" style="display: none;">
			<i data-v-d1db20f6="" class="close-icon el-icon-close">
			</i>
			<div data-v-d1db20f6="" class="menu-img">
				<img data-v-d1db20f6="" src="" alt="">
			</div>
		</div>
	</div>
	<!--left-->
	<div data-v-37c16eed="" data-v-258a4cb6="" class="header-wrap headerGradient">
		<div data-v-37c16eed="" class="header">
			<div data-v-37c16eed="" class="fr header-content" style="width:100px;">
				<span data-v-37c16eed="" class="avartar">
					<i data-v-37c16eed="" class="icon iconfont icontouxiang">
					</i>
				</span>
			</div>
			<div data-v-37c16eed="" class="fr home-wrap">
				<div data-v-37c16eed="" class="to-index">
					<a href="https://www.bupt.edu.cn/" style="color: white;">
						北京邮电大学
					</a>
				</div>
			</div>
		</div>
	</div>
    <div data-v-6e4950ed="" data-v-258a4cb6="" class="el-dialog__wrapper map-search-wrap clearfix"
             id="mapinfo_dialog" style="z-index: 9999;display: none;">
            <div role="dialog" aria-modal="true" aria-label="产品详情" class="el-dialog el-dialog--center"
                 style="margin-top: 0vh; width: 1350px;">
                <div class="el-dialog__header">
				<span class="el-dialog__title">
					产品详情
				</span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                        <i class="el-dialog__close el-icon el-icon-close">
                        </i>
                    </button>
                </div>
                <div class="el-dialog__body">
                    <div data-v-6e4950ed="" class="mapSearchContent">
                        <div data-v-6e4950ed="" class="fgl_results_operation clearfix">
                            <div data-v-6e4950ed="" class="fl bt">
                                <div data-v-6e4950ed="" class="iconqiebox">
                                    <i data-v-6e4950ed="" class="el-icon-close close-btn" id="close2">
                                    </i>
                                </div>
                            </div>
                        </div>
                        <div data-v-6e4950ed="" class="meta-data-dialog clearfix">
                            <div data-v-6e4950ed="" class="meta-data-map fl">
                                <div data-v-6e4950ed="" id="mapContainer"
                                     class="map-right leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
                                     style="position: relative;" tabindex="0">
{#                                    <img src="{% static 'images/1.png' %}" style="height:600px;width:600px;"/>#}
                                </div>
                            </div>
                            <div data-v-6e4950ed="" class="meta-data-detail fl">
                                <!---->
                                <div data-v-6e4950ed="" class="image-info">
                                    <div data-v-6e4950ed="" class="base-info">
                                        <div data-v-6e4950ed="" class="info-title" style="font-size:20px;">
                                            基本信息
                                        </div>
                                        <div data-v-6e4950ed="" class="info-content" style="">
                                            <div data-v-6e4950ed="" class="clearfix">
                                                <div data-v-6e4950ed="" class="infoTd" style="font-size:15px;width:100%;">
                                                    编号:&nbsp;<span id="event_id"></span>
                                                </div>
                                                <div data-v-6e4950ed="" class="infoTd" style="font-size:15px;width:100%;">
                                                    时间:&nbsp;<span id="date"></span>
                                                </div>
                                                <div data-v-6e4950ed="" class="infoTd" style="font-size:15px;width:100%;">
                                                    地点:&nbsp;<span id="address"></span>
                                                </div>
                                                <div data-v-6e4950ed="" class="infoTd" style="font-size:15px;width:100%;">
                                                    bbox:&nbsp;<span id="bbox"></span>
                                                </div>
                                            </div>
                                            <div data-v-6e4950ed="" class="clearfix">
                                            </div>
                                            <div data-v-6e4950ed="" class="clearfix">
                                            </div>
                                            <div data-v-6e4950ed="" class="clearfix">
                                            </div>
                                            <div data-v-6e4950ed="" class="clearfix">
                                            </div>
                                            <div data-v-6e4950ed="" class="clearfix">
                                            </div>
                                            <div data-v-6e4950ed="" class="clearfix">
                                            </div>
                                        </div>
                                        <div data-v-6e4950ed="" class="info-content clearfix" style="display: none;">
                                            <div data-v-6e4950ed="" class="skeleton-wrap">
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                            </div>
                                            <div data-v-6e4950ed="" class="skeleton-wrap">
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                            </div>
                                            <div data-v-6e4950ed="" class="skeleton-wrap">
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                            </div>
                                            <div data-v-6e4950ed="" class="skeleton-wrap">
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                            </div>
                                            <div data-v-6e4950ed="" class="skeleton-wrap">
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                            </div>
                                            <div data-v-6e4950ed="" class="skeleton-wrap">
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                            </div>
                                            <div data-v-6e4950ed="" class="skeleton-wrap">
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div data-v-6e4950ed="" class="prod-params">
                                        <div data-v-6e4950ed="" class="info-title" style="font-size:20px;">
                                            事件详情
                                        </div>
                                        <div data-v-6e4950ed="" class="info-content">
                                            <div data-v-6e4950ed="" class="clearfix" id="information">
                                            </div>
                                        </div>
                                        <div data-v-6e4950ed="" class="info-content clearfix" style="display: none;">
                                            <div data-v-6e4950ed="" class="skeleton-wrap">
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                            </div>
                                            <div data-v-6e4950ed="" class="skeleton-wrap">
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                            </div>
                                            <div data-v-6e4950ed="" class="skeleton-wrap">
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                            </div>
                                            <div data-v-6e4950ed="" class="skeleton-wrap">
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                            </div>
                                            <div data-v-6e4950ed="" class="skeleton-wrap">
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                            </div>
                                            <div data-v-6e4950ed="" class="skeleton-wrap">
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                            </div>
                                            <div data-v-6e4950ed="" class="skeleton-wrap">
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                                <div data-v-6e4950ed="" class="skeleton is-animated">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!---->
            </div>
    </div>
</body>

<script>
    //在map上覆盖图片
    function drawImage(x1, y1, x2, y2, url) {
        const pStart = new BMapGL.Point(x1, y2);
        const pEnd = new BMapGL.Point(x2, y1);
        const bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pStart.lat), new BMapGL.Point(pEnd.lng, pEnd.lat));
        const opts = {
            type: 'image',
            url: url,
            opacity: 0.5
        };
        return new BMapGL.GroundOverlay(bounds, opts);
    }

    var map = new BMapGL.Map('map'); // 创建Map实例
	map.centerAndZoom(new BMapGL.Point(106, 36), 5); // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
	map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式
	//map.setMapType(BMAP_SATELLITE_MAP);      // 设置地图类型为普通卫星地图模式
	map.disableKeyboard(); // 禁用键盘操作

    var map1 = new BMapGL.Map('mapContainer');
    map1.enableScrollWheelZoom(true);
    map1.centerAndZoom(new BMapGL.Point(113.740917, 41.893814), 8); // 初始化地图,设置中心点坐标和地图级别
    let overlayImage = drawImage(114.09333, 38.942646, 117.388504, 40.844982, "{% static 'images/1.png' %}");
    console.log(overlayImage);
    // 覆盖物添加到地图
    map1.addOverlay(overlayImage);

</script>

<script>
    const bbox = {{ bbox|safe }};
    const boundary = {{ boundary|safe }};
    const event_id = {{ event_id|safe }};
    const information = {{ information|safe }};
    const address = {{ address|safe }};
    const date = {{ date|safe }};
    let centers = [0, 0];
    const len = boundary.length;
    const event_id1 = document.getElementById('event_id');
    const date1 = document.getElementById('date');
    const address1 = document.getElementById('address');
    const bbox1 = document.getElementById('bbox');
    const information1 = document.getElementById('information');
    const mapinfo_dialog = document.getElementById('mapinfo_dialog');

    for(let i=0;i<len;i++) {
        const center = [(bbox[i][0]+bbox[i][2])/2, (bbox[i][1]+bbox[i][3])/2];
        centers[0] += (bbox[i][0]+bbox[i][2]);
        centers[1] += (bbox[i][1]+bbox[i][3]);
        let mPoint = new BMapGL.Point(center[0], center[1])
        let marker = new BMapGL.Marker(mPoint);
        let mapmask;
        let border;
        let path = [];
        let point;
        for (let j = 0; j < boundary[i].length; j++) {
            point = new BMapGL.Point(parseFloat(boundary[i][j][0]), parseFloat(boundary[i][j][1]));
            path.push(point);
        }
        mapmask = new BMapGL.MapMask(path, {
            isBuildingMask: true,
            isPoiMask: true,
            isMapMask: true,
            showRegion: 'inside',
            topFillColor: '#5679ea',
            topFillOpacity: 0.5,
            sideFillColor: '#5679ea',
            sideFillOpacity: 0.9
        });
        {#console.log(mapmask);#}
        map.addOverlay(mapmask);
        border = new BMapGL.Polyline(path, {
            strokeColor: '#4ca7a2',
            strokeWeight: 3,
            strokeOpacity: 1
        });
        map.addOverlay(border);
        map.addOverlay(marker);
        marker.addEventListener('click', ()=>{
            event_id1.innerText = event_id[i].toString();
            date1.innerText = date[i];
            address1.innerText = address[i];
            bbox1.innerText = bbox[i].toString();
            information1.innerText = information[i];
            mapinfo_dialog.style.display = 'block';
        })
    }
    centers[0] /= (len*2);
    centers[1] /= (len*2);
    const mPoint = new BMapGL.Point(centers[0], centers[1]);
    map.enableScrollWheelZoom();
    map.centerAndZoom(mPoint, 12);                          //后续还需调整地图级别

    $(document).ready(function() {
        var html = "";

        let array = [];

        for (let i = 0; i < date.length; i += 10) {
            array.push(date.slice(i, i + 10));
        }

        array.map((items)=>{
            for (let i = 0; i < items.length; i++) {
              html = html + `<div class ="dot border" data-time="${items[i]}" style="background-color:#2a6fdb" >
                            <span data-time="${items[i]}"> </span>
                            <date data-time="${items[i]}">${items[i]}</date>
                          </div>`;
            }
        })
            $('#timeline').append(html);
            // $("#time-show-bt").on("click",function(){
            // 	if($("#time-warp").hasClass("timeshow")){
            // 		$("#time-warp").removeClass("timeshow");
            // 		$("#time-warp").addClass("timehide");
            // 		$("#time-show-bt").text("开");
            // 	}else{
                    $("#time-warp").removeClass("timehide");
                    $("#time-warp").addClass("timeshow");
                    // $("#time-show-bt").text("关");
            // 	}
            // })
        $("#timeline").on("click",function (e){
            let time =e.target.getAttribute("data-time");
            for(let i=0;i<len;i++) {
                if(date[i] === time) {
                    event_id1.innerText = event_id[i].toString();
                    date1.innerText = date[i];
                    address1.innerText = address[i];
                    bbox1.innerText = bbox[i].toString();
                    information1.innerText = information[i];
                    mapinfo_dialog.style.display = 'block';
                    break;
                }
            }
        })
	});

    document.getElementById('close2').addEventListener('click', function () {
        document.getElementById('mapinfo_dialog').style.display = "none";
    });
</script>
<style>/*去除百度地图版权*/

.anchorBL{

display:none;

}

</style>

</html>